<template>
  <div class="goodsList-container">
    <search-form
      :config-list="searchFormConfig"
      @search="search"
      @reset="reset"
      ref="searchFormRef"
    >
      <template #leftSlot>
        <!--左侧的插槽-->
        <el-button
          icon="Search"
          type="primary"
          @click="handleAdd('add')"
          v-permissions="['goodsArrtlistAdd']"
        >
          新增
        </el-button>
      </template>
      <template #rightSlot>
        <!--右侧的插槽-->
      </template>
    </search-form>
    <CustomTable
      :pagination="pagination"
      :table-config="tableConfig"
      @pagination-change="paginationChange"
      @actions-click="actionsClick"
    >
      <template #specAttr="scope">
        <el-tag v-for="item in scope.row.specAttr" :key="item" type="primary" style="margin: 5px;">
          {{ item.goods_spec_value_name }}
        </el-tag>
      </template>
    </CustomTable>
    <goodsArrtAdd ref="goodsArrtAddRef" @fetch-data="search" />
  </div>
</template>

<script>
  export default {
    name: 'goodsList',
  }
</script>

<script setup>
  import CustomTable from '@/views/component/CustomTable'
  import SearchForm from '@/views/component/SearchForm' //引入搜索组件
  import {
    getgoodsArrtList as getList,
    editgoodsArrtStatus,
    delgoodsArrt,
  } from '@/api/goods'
  import goodsArrtAdd from './components/goodsArrtAdd.vue'
  import { message } from '@/utils/helper'

  // 搜索参数
  const queryForm = ref({})

  const tableConfig = reactive({
    columns: [
      {
        label: 'ID',
        prop: 'id',
        sortable: false,
        width: 120,
        fixed: 'left',
      },
      {
        label: '规格名称',
        prop: 'goods_spec_name',
        sortable: false,
        width: 160,
      },
      {
        label: '规格属性',
        prop: 'specAttr',
        sortable: false,
        width: 460,
        slotName: 'specAttr',
      },
      {
        label: '状态',
        prop: 'status',
        sortable: false,
        width: 120,
        customType: 'ElTag',
        tagKeyValue: 'statusTag',
      },
      {
        label: '规格类型',
        prop: 'type',
        sortable: false,
        width: 120,
        customType: 'ElTag',
        tagKeyValue: 'type',
      },
      { label: '创建人', prop: 'admin_name', sortable: false, width: 120 },
      { label: '创建时间', prop: 'create_time', sortable: false, width: 180 },
      {
        label: '操作',
        action: true,
        fixed: 'right',
        actions: [
          {
            fnName: 'setup',
            title: '启用',
            type: 'success',
            isTextBtn: true,
            permissionCode: 'goodsArrtlistSetup', // 权限
            visibleFc: (row) => {
              return row.audit === 0 && row.type === 1
            },
          },
          {
            fnName: 'down',
            title: '禁用',
            type: 'danger',
            isTextBtn: true,
            permissionCode: 'goodsArrtlistDown', // 权限
            visibleFc: (row) => {
              return row.audit === 1 && row.type === 1
            },
          },
          {
            fnName: 'edit',
            title: '编辑',
            type: 'primary',
            isTextBtn: true,
            permissionCode: 'goodsArrtlistEdit', // 权限
            key: 'type',
            showValue: 1,
          },
          {
            fnName: 'delete',
            title: '删除',
            type: 'danger',
            isTextBtn: true,
            permissionCode: 'goodsArrtlistDelete', // 权限
            key: 'type',
            showValue: 1,
          },
        ],
      },
    ],
    tagConfig: {
      type: {
        1: {
          name: '商家添加',
          type: 'success',
        },
        2: {
          name: '系统自带',
          type: 'primary',
        },
      },
      //审批状态 1:审批中 2:审批通过 3:审核不通过
      statusTag: {
        0: {
          name: '禁用',
          type: 'primary',
        },
        1: {
          name: '正常',
          type: 'success',
        },
      },
    },
    list: [],
    listLoading: false,
  })

  //搜索组件配置信息
  const searchFormConfig = reactive({
    config: {
      layoutType: 1, //1:左右布局,2:上下布局
      leftPanelWidth: 0, //控制左边布局控件宽度
    },
    controlList: [
      { label: '规格名称', prop: 'goods_spec_name', type: 'input' },
      {
        label: '状态',
        prop: 'status',
        type: 'select',
        list: Object.keys(tableConfig['tagConfig']['statusTag']).reduce(
          (acc, cur) => {
            const { name } = tableConfig['tagConfig']['statusTag'][cur]
            acc.push({ label: name, value: cur })
            return acc
          },
          []
        ),
      },
      {
        label: '规格类型',
        prop: 'type',
        type: 'select',
        list: Object.keys(tableConfig['tagConfig']['type']).reduce(
          (acc, cur) => {
            const { name } = tableConfig['tagConfig']['type'][cur]
            acc.push({ label: name, value: cur })
            return acc
          },
          []
        ),
      },
    ],
  })

  //点击搜索触发
  const search = (form) => {
    console.log(form)
    pagination.page = 1
    queryForm.value = form
    queryProject()
  }

  //列表分页参数
  const pagination = reactive({
    page: 1, //每页条数
    limit: 10, //当前页
    total: 0,
    layout: 'total, sizes, prev, pager, next, jumper',
  })

  //分页控件点击操作
  const paginationChange = (data) => {
    const { val, type } = data
    pagination[type] = val
    queryProject()
  }

  //请求列表数据
  const queryProject = () => {
    tableConfig.listLoading = true
    getList({
      ...queryForm.value,
      limit: pagination.limit,
      page: pagination.page,
    })
      .then((result) => {
        console.log('result', result)
        tableConfig.list = result.data.data
        tableConfig.listLoading = false
        pagination.total = result.data.total
      })
      .catch(() => {
        tableConfig.listLoading = false
      })
  }

  //点击表格操作按钮回调
  const actionsClick = (data) => {
    console.log('actionsClick===', data)
    const { type, row } = data

    const mes = () => {
      ElMessageBox.confirm(
        `确定要${type === 'down' ? '禁用' : '启用'}该规格吗？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(async () => {
        const res = await editgoodsArrtStatus({
          id: row.id,
          status: type === 'down' ? 0 : 1,
        })
        if (res.code === 200) {
          message('操作成功')
          queryProject()
        }
      })
    }
    switch (type) {
      case 'edit':
        handleAdd(type, row)
        break
      case 'delete':
        handleDelete(row)
        break
      case 'setup':
        mes()
        break
      case 'down':
        mes()
        break
    }
  }
  const goodsArrtAddRef = ref(null)
  const handleAdd = (type = 'add', row = null) => {
    goodsArrtAddRef.value.open(type, row)
  }

  const handleDelete = (row) => {
    ElMessageBox.confirm('确定要删除该规格吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      const res = await delgoodsArrt({
        id: row.id,
      })
      if (res.code === 200) {
        message('删除成功')
        queryProject()
      }
    })
  }
  const searchFormRef = ref(null)
  const reset = () => {
    if (!searchFormRef.value) return
    searchFormRef.value.resetFormFields()
    queryProject()
  }

  const init = async () => {
    await queryProject()
  }

  init()
</script>

<style lang="scss" scoped></style>
